<script setup>
import { ref } from "vue";
import MaterialInput from "@/components/MaterialInput.vue";
import MaterialButton from "@/components/MaterialButton.vue";
import MaterialCheckbox from "@/components/MaterialCheckbox.vue";
import MaterialTextArea from "@/components/MaterialTextArea.vue";

import logo1 from "@/assets/img/assets/logo1.png";
import logo2 from "@/assets/img/assets/logo2.png";

import { assetlist } from "@/api/tires";

let arr1 = ref([]);
let arr2 = ref([]);
let arr11 = ref([]);
let fileurl = ref("");
assetlist({ pageNum: 1, pageSize: 10, bigType: "MARKETING ASSETS" }).then((res) => {
    res.data.records.forEach((item) => {
        if (item.assetPic) {
            if (item.smallType == "Marketing Material Download") {
                arr1.value = item.assetPic.split(",");
            } else {
                arr2.value = item.assetPic.split(",");
            }
        }
        if (item.assetFile) {
            if (item.smallType == "Marketing Material Download") {
                arr11.value = item.assetFile.split(",");
            } else {
                fileurl.value = item.assetFile;
            }
        }
    });
});
const downloadFiles = (url, fileName) => {
    //图片的地址
    fetch(url)
        // 获取 blob 对象
        .then((res) => res.blob())
        .then((blob) => {
            // 创建a标签
            var link = document.createElement("a");
            // 设置a标签为不可见
            link.style.display = "none";
            // 将a标签添加到body
            document.body.appendChild(link);
            // 生成Blob URL并设置给a标签的href属性
            var url = window.URL.createObjectURL(blob);
            link.href = url;
            // 设置a标签的download
            link.download = fileName;
            // 模拟点击事件进行下载
            link.click();
            //下载完成后清理URL对象和a标签
            window.URL.revokeObjectURL(url);
            document.body.removeChild(link);
        });
};
const preview = (url) => {
    window.open(url);
};
</script>
<template>
    <div class="container text-center">
        <h1 class="text-f-ERASBD text-black mb-5 uppercase">Marketing Material Download</h1>
        <div class="row">
            <div v-for="(item, index) in arr1" :key="index" class="col-lg-6 mb-4">
                <img class="img-fluid show-pointer" style="width: 100%" :src="item" alt="" @click="preview(arr11[index])" />
            </div>
        </div>

        <h1 class="text-f-ERASBD text-black my-5 uppercase">Brand Logo Download</h1>
        <div class="row justify-content-center">
            <div class="col-lg-5 mb-4 pe-1">
                <img class="img-fluid show-pointer" :src="logo1" :alt="title" @click="downloadFiles(logo1, 'logo1')" />
            </div>
            <div class="col-lg-4 mb-4 brand-logo">
                <img class="img-fluid show-pointer" :src="logo2" :alt="title" @click="downloadFiles(logo2, 'logo2')" />
            </div>
        </div>

        <h1 class="text-f-ERASBD text-black my-5 uppercase">SPEC DATA Download</h1>
        <div class="row justify-content-center">
            <div v-for="(item, index) in arr2" :key="index" class="col-lg-6 mb-4"><img class="img-fluid show-pointer" style="width: 100%; height: auto" :src="item" :alt="title" @click="preview(fileurl)" /></div>
        </div>
    </div>
</template>

<style scoped>
.desc {
    background: #efefef;
    border-radius: 1rem;
    padding: 1rem;
    margin: 1rem;
}
.brand-logo {
    padding-right: 2rem;
}
@media (max-width: 991.98px) {
    .brand-logo {
        padding-right: 0rem;
    }
}
</style>
